<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件与v-once指令</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="app"> 
        <!-- 动态组件实现组件之间的转换 -->
        <!-- <component :is="type"></component> -->
        <!-- v - if  实现组件之间的转换  -->
           <!-- <child-one v-if="type === 'child-one'"></child-one>
           <child-two v-if="type === 'child-two'"></child-two> -->
           <!-- <button @click="handleBtnClick">change</button> -->
         <!-- v - once  处理   数据内容只渲染一次-->
          
    </div>   
    
    <script>

        
        Vue.component('child-one',{            
            template: '<div>Child-One</div>',
        })
        Vue.component('child-two',{            
            template: '<div>Child-Two</div>',
        })
    
        var root = new Vue({
            el: '#app',
            data: {
                type: 'child-one'
            },
            //    v-once  切换组件
            template: `
            <div>
                <child-one v-if="type === 'child-one'" />
                <child-two v-if="type === 'child-two'" />
                <button @click="handleBtnClick">change</button>
           </div>
            `,
            methods: {
                handleBtnClick: function(){
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
                }
            }        
           
        });
    </script>
</body>
</html>